<template>
	<view >
		<!-- 头部导航栏 -->
			<view class="navbar" style="position: static;" id="top-bar">
			<view @click="toPath('/pages/product/search')" class="pl30"  >
				<view class="re df" >
					<view class="search_box_sty">
						<image src="/static/icon_serach_1.png" class="icon_serach_size vt"></image>
						<view class="ml20 fs24">搜索</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 头部导航栏 -->
		<view class="box">
			<!-- <view class="re mt-30">
				<image @click="toPath('/pages/order/order')" src="https://offer-1318401590.cos.ap-guangzhou.myqcloud.com/mpstatus/phs/banner_01.png"
					class="wp100 vt" style="height: 120rpx;"></image>
			</view> -->
			<view class="bgf pl30 sticky_pos ">
				<scroll-view scroll-x="true" class="tab_area_list">
					<view class=" item_tab"
					:class="{active:catOneIndex == index}"
					v-for="(item,index) in CatList"
					:key="item.value"
					@click="handOneCat(index)"
					>
						<view class="fz_sty_re">{{item.label}}</view>
					</view>
				</scroll-view>
			</view>
			<view 
			class="menu_h_vh flex_box">
				
				<view class="menu_left">
				<!--  -->
					<view  class=" a_type"
					:class="{active:catTwoIndex == index}"
					:key="item.value"
					@click="handTwoCat(index)"
					v-for="(item,index) in CatList[catOneIndex]?.child"
					>{{item.label}}</view>
					
				</view>

				<view class="item">
					<view class="menu_right">

						<!-- 苹果 -->
						<view class="" v-for="xilie in ProductList" :key="xilie.serie_id">
							<view class="pt40 fs36 fwb">{{xilie.series_name}}</view>
							<view class="">
								<view @click="toDetail(item.product_id)" class="mt40 flex_box" v-for="item in xilie.child" :key="item.product_id">
<!--									<view class="mr30" style="width: 100rpx; product-image">-->
<!--										<image mode="aspectFit" :src="item.image" class="img_3 vt"></image>-->
<!--									</view>-->
									<view class="item r_bb1 ov"  style="padding-bottom: 20rpx">
										<view class="flex_box aic">
											<view class="flex">
                        <view style="background-color: #f4f6f8;width: 10px;height: 10px;border-radius: 50%"></view>
												<view style="margin-left: 20rpx" class="fs30 fwb clamp_3 product_name">{{item.title}}</view>
											</view>
											<view class="tar" style="flex: 1;justify-items: end">
												<view class="fwb cor_EC0"><text class="fs24">￥</text><text
														class="fs36">{{item.price}}</text></view>
												<view class="mt20 " style="font-size: 20rpx">预计可卖</view>
											</view>
										</view>
									</view>
								</view>
							</view>
							
						</view>

					</view>
				</view>

			</view>

		</view><!-- box -->
	</view>
</template>

<script setup lang="ts">
	import ljPointout from '@/components/lj-pointout/lj-pointout.vue'
	import { getCat ,getProduct} from '@/api/product'
	import { onLoad, onShow, onPageScroll } from '@dcloudio/uni-app'
	import { computed, reactive, ref, shallowRef, watch, nextTick } from 'vue'
	import { navigateTo } from '@/utils/util'
	import { storeToRefs } from 'pinia'
	import { useUserStore } from '@/stores/user'
	import { log } from 'console'
	const userStore = useUserStore()
	const { userInfo, isLogin } = storeToRefs(userStore)
	
	
	const catOneIndex = ref(0);
	const catTwoIndex = ref(0);
	
	
	const CatList = ref([]);
	const ProductList = ref([]);
	
	
	
	const toPath = (link:any,login = true) => {
		// console.log(login,isLogin.value == false)
		if (isLogin.value == false && login) {
			uni.navigateTo({
				url: '/pages/login/login'
			})
			return false;
		}
		uni.navigateTo({
			url: link
		})
	}
	
	
	const handOneCat = (index:any) => {
		catOneIndex.value = index;
		catTwoIndex.value = 0;	
		getProductData();
	}
	
	const handTwoCat = (index:any) => {
		catTwoIndex.value = index;	
		 getProductData();
	}
	
	const toDetail = (id:Number) => {
		uni.navigateTo({
			url:'/pages/product/detail?id=' + id,
		})
	}
	
	
	//获取分类
	const getCatData = async () => {
	   let list = 	await getCat();
	   CatList.value = list.list;
	   getProductData();
	}
	
	
	//获取产品列表
	const getProductData = async () => {
		// console.log(CatList.value[catOneIndex.value].child[catTwoIndex.value])
		let catId = CatList.value[catOneIndex.value].child[catTwoIndex.value].value || 0
		let product = await getProduct({cat_id:catId});
		ProductList.value = product.list
	}
	
	
	
	
	// ------ data ------
	const navTopSty = ref(false) //解决图片铺满整个屏幕时，筛选吸顶，而导航栏透明，看见了背后的内容
	const titleHeight = ref(0)
	const navbarRight = ref(0) //导航栏距离右边的距离
	const navBoxH = ref(0) //胶囊的高度
	const navBoxHTwo = ref(0) //这是实际的导航栏带底部内边距事的高度
	const navPaddingH = ref(0) //自定义导航栏的高度
	
	// 获取微信右上角胶囊高度
	const getHeight = async () => {
		let res = wx.getMenuButtonBoundingClientRect();
		titleHeight.value = res.top;
		navbarRight.value = res.width; //胶囊的宽度
		navBoxH.value = res.height; //胶囊的高度
		navBoxHTwo.value = res.height + 6;
	}
	
	
	onLoad(() => {
		getCatData();
		getHeight();
	})
	
</script>


<style lang="scss">
	.navbar {
		background: #fff;
	}
	
	
	.search_box_sty {
		position: relative;
		display: flex;
		align-items: center;
		text-align: left;
		width: calc(100% - 30rpx);
		height: 100%;
		padding: 0 30rpx;
		height: 64rpx;
		background: #F4F6F8;
		border-radius: 6rpx;
		border: 1px solid #333333;
	}
	
	.icon_serach_size {
		position: relative;
		width: 32rpx;
		height: 33rpx;
	}
	page {
		background: #F4F6F8;
	}
	.product-image{
		box-shadow: 0rpx 1rpx 30rpx 0rpx rgba(206,238,217,0.5);
	}
	.product_name{
		width: 200rpx;
	}
	.search_box {
		position: relative;
	}

	.sticky_pos {
		position: sticky;
	}

	.menu_h_vh {
		position: relative;
		height: calc(100vh - 120rpx);
		overflow: hidden;
	}

	.search_box .ipt_search {
		position: relative;
		display: inline-block;
		padding: 0 30rpx 0 92rpx;
		width: 100%;
		height: 78rpx;
		line-height: 78rpx;
		font-size: 30rpx;
		color: #333;
		text-align: left;
		background: #FFFFFF;
		border-radius: 10rpx;
		outline: none;
	}

	.search_box .ipt_search::-webkit-input-placeholder {
		color: #aaa;
	}

	.icon_search_img {
		position: absolute;
		top: 23rpx;
		left: 30rpx;
		width: 32rpx;
		height: 33rpx;
		z-index: 2;
	}

	.tab_area_list {
		white-space: nowrap;
	}

	.tab_area_list .item_tab {
		position: relative;
		display: inline-block;
		height: 100rpx;
		line-height: 100rpx;
		margin-right: 66rpx;
	}

	.tab_area_list .item_tab .fz_sty_re {
		position: relative;
		line-height: 95rpx;
		text-align: center;
		font-size: 30rpx;
		color: #333;
		z-index: 2;
	}

	/* .tab_area_list .item_tab.active .fz_sty_re { font-weight: bold;font-size: 32rpx; } */

	.tab_area_list .item_tab::after {
		display: none;
		content: "";
		position: absolute;
		left: 50%;
		bottom: 0;
		width: 60rpx;
		height: 6rpx;
		background: linear-gradient(180deg, rgba(255,73,7,.6) 0%, rgba(255,73,7,1) 100%);
		border-radius: 3rpx;
		transform: translateX(-50%);
		z-index: 2;
	}

	.tab_area_list .active.item_tab::after {
		display: block;
	}

	.menu_left {
		position: relative;
		width: 200rpx;
	}

	// .menu_left .a_type {
	// 	position: relative;
	// 	display: block;
	// 	height: 80rpx;
	// 	line-height: 80rpx;
	// 	font-size: 30rpx;
	// 	color: #333;
	// 	text-align: center;
	// }
	
	.menu_left .a_type {
	    position: relative;
	    display: block;
	    padding: 20rpx 15rpx;
	    font-size: 30rpx;
	    line-height: 42rpx;
	    color: #333;
	    text-align: center;
	
	  }

	.menu_left .a_type.active {
		font-weight: bold;
		font-size: 36rpx;
		background: #fff;
	}

	.menu_left .a_type::after {
		display: none;
		content: "";
		position: absolute;
		top: 50%;
		left: 0;
		width: 6rpx;
		height: 40rpx;
		background: #FF4907;
		border-radius: 3rpx;
		transform: translateY(-50%);
		z-index: 3;
	}

	.menu_left .active.a_type::after {
		display: block;
	}

	.menu_left {
		position: relative;
		height: 100%;
		overflow-y: auto;
	}

	.menu_right {
		position: relative;
		padding: 0 40rpx 40rpx;
		height: 100%;
		background: #fff;
		overflow-y: auto;
	}
</style>